<template>
	<view class="login_res_view">
		<view class="">
			<view class="big_title">
				绑定手机
				<view class="wei_y"></view>
			</view>
			<view class="sm_tit">
				为了您的账号安全，请使用本人手机号码
			</view>
			<view class="hang_phone_sy">
				<view class="left_n">
					手机号
				</view>
				<input type="number" v-model="phone" class="phone_input" placeholder="请输入手机号" >
			</view>
			<view class="hang_pwd_sy">
				<input type="number" v-model="code" class="c_input" placeholder="验证码" >
				<view class="abso_text">
					<view v-if="yamTime == 0"  @click="getYzm">
						获取验证码
					</view>
					<view v-if="yamTime > 0" class="yzm_box">
						<span class="yam_tc">{{yamTime}}</span>  重新获取
					</view>
				</view>
			</view>
			<view class="pub_s_btn_sy" @click="yanzhangPhone">
				下一步
			</view>
			<!-- <view class="pub_s_btn_sy bwx" @click="yanzhangPhone">
				使用微信手机号
			</view> -->
			<button class="pub_s_btn_sy bwx" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				style="width: 100%;">
				<text style="width: 100%;">使用微信手机号</text>
			</button>
		</view>
		<!-- <view class="yisizhengce">
			<view class="ptc1">
				用户隐私保护提示
			</view>
			<view class="">
				请仔细阅读 <a href="https://mp.weixin.qq.com/wxawap/waprivacyinfo?action=show&appid=wx5cab96983e69fb4d#wechat_redirect" target="_blank" rel="noopener noreferrer">《志愿填报小程序隐私保护指引》</a>如果您同意该指引，请点击“同意”开始使用本小程序。
			</view>
			<view class="btns">
				<button class="btn">
					<text style="width: 100%;">拒绝</text>
				</button>
				<button class="btn green" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					style="width: 100%;">
					<text style="width: 100%;">同意</text>
				</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yamTime:0,
				yTimer:"",
				phone:"",
				code:"",
				tid:"",
				PhoneCode:"",
				isPhone:false
			}
		},
		beforeDestroy() {
			let this_ = this;
			try{
				clearInterval(this_.yTimer);
				this.yTimer = "";
			}catch(e){
				//TODO handle the exception
			}
		},
		onLoad(ph) {
			if(ph.tid){
				this.tid = ph.tid
			}
		},
		methods: {
			getPhoneNumber(e) {
				this.PhoneCode = e.detail.code
				console.log(e.detail.code)
				this.isPhone = true
			},
			yanzhangPhone(){
				
				
				let dataL = {
					mobile:this.phone,
					code:this.code
				}
				this.$queryApi("post","user.user/changeMobile", dataL, res => {
					console.log(res)
					uni.navigateTo({
						url:"/pages/login/loginRes2?phone="+this.phone+"&code="+this.code+"&tid="+this.tid
					})
				},"false")
				uni.navigateTo({
					url:"/pages/login/loginRes2?phone="+this.phone+"&code="+this.code+"&tid="+this.tid
				})
				
			},
			nativeTo(url){
				uni.navigateTo({
					url:url
				})
			},
			getYzm(){
				let this_ = this;
				this.yamTime = 30;
				let dataL = {
					phone:this.phone,
					event:"changemobile"
				}
				this.yTimer = setInterval(()=>{
					if(this.yamTime > 0){
						--this.yamTime;
						if(this.yamTime == 0){
							clearInterval(this_.yTimer);
							this.yTimer = "";
						}
					}
				},1000)
				// 1绑定2修改手机号3忘记密码4直接登录5修改密码
				this_.$queryApi("post","index/send", dataL, res => {
					
					
				},"")
			}
		}
	}
</script>

<style lang="scss">
	.pub_s_btn_sy{
		width: 638rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #9BF2EB 0%, #B3DFFD 53%, #E3B1FF 100%);
		border-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		&.bwx{
			background: linear-gradient(90deg, #E3B1FF 0%, #B3DFFD 53%, #9BF2EB 100%);
			margin-top: 20rpx;
		}
	}
	
	.hang_pwd_sy{
		
		position: relative;
		margin-bottom: 56rpx;
		.c_input{
			border: none;
			outline: none;
			width: 638rpx;
			height: 100rpx;
			background: #F6F6F6;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding-left: 35rpx;
			
		}
		
		.abso_text{
			position: absolute;
			right: 30rpx;
			display: flex;
			align-items: center;
			top: 50%;
			margin-top:-21rpx ;
			z-index:10;
			font-size: 30rpx;
			.yan{
				width: 36rpx;
				height: 26rpx;
				margin-right:20rpx ;
				position: relative;
				top: 2rpx;
			}
		}
	}
	
	.hang_phone_sy{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
		.left_n{
			width: 120rpx;
			height: 100rpx;
			background: #F6F6F6;
			border-radius: 24rpx;
			// font-weight: bold;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
		.phone_input{
			background: #F6F6F6;
			width: 494rpx;
			height: 100rpx;
			background: #F6F6F6;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding-left: 35rpx;
			font-size: 30rpx;
		}
	}
	.login_res_view{
		padding: 50rpx 60rpx 60rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		.big_title{
			font-size: 44rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #383D45;
			display: flex;
			position: relative;
			padding:0 0 20rpx;
			.sm_xing{
				width: 30rpx;
				height: 30rpx;
				margin-left: 4rpx;
			}
			.wei_y{
				width: 60rpx;
				height: 8rpx;
				background: linear-gradient(90deg, #9BF2EB 0%, #B3DFFD 53%, #E3B1FF 100%);
				border-radius: 4px;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
		.sm_tit{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ABACB4;
			padding: 20rpx 0 30rpx;
		}
		.hang_pwd_sy{
			margin-bottom:80rpx ;
		}
	}
</style>
